<template>
  <div class="page-container">
    <!-- 头部统计卡片 -->
    <a-row :gutter="16">
      <a-col :span="12" v-for="stat in statistics" :key="stat.title">
        <a-card class="stat-card" :bodyStyle="{ padding: '16px' }">
          <div class="stat-content">
            <component :is="stat.icon" class="stat-icon" :class="stat.type" />
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 生产状态图表 -->
    <a-card class="chart-card">
      <template #title>
        <div class="card-header">
          <span>生产状态</span>
          <a-radio-group v-model:value="timeRange" size="small">
            <a-radio-button value="day">今日</a-radio-button>
            <a-radio-button value="week">本周</a-radio-button>
            <a-radio-button value="month">本月</a-radio-button>
          </a-radio-group>
        </div>
      </template>
      <div class="chart-container">
        <v-chart class="chart" :option="productionChartOption" autoresize />
      </div>
    </a-card>

    <!-- 设备状态列表 -->
    <a-card class="equipment-card">
      <template #title>
        <div class="card-header">
          <span>设备状态</span>
          <a-button type="link">查看全部</a-button>
        </div>
      </template>
      <a-table :dataSource="equipmentList" :columns="columns" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === '运行中' ? 'success' : 'warning'">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'efficiency'">
            <a-progress
              :percent="record.efficiency"
              :status="record.efficiency >= 90 ? 'success' : 'normal'"
            />
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  DashboardOutlined,
  LineChartOutlined,
  WarningOutlined,
  ApiOutlined
} from '@ant-design/icons-vue'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent
])

// 统计数据
const statistics = ref([
  {
    title: '在线设备',
    value: '24/30',
    icon: DashboardOutlined,
    type: 'primary'
  },
  {
    title: '生产计划完成率',
    value: '85%',
    icon: LineChartOutlined,
    type: 'success'
  },
  {
    title: '异常预警',
    value: '3',
    icon: WarningOutlined,
    type: 'warning'
  },
  {
    title: '数据同步状态',
    value: '正常',
    icon: ApiOutlined,
    type: 'info'
  }
])

// 时间范围选择
const timeRange = ref('day')

// 生产状态图表配置
const productionChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['计划产量', '实际产量', '良品率']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
  },
  yAxis: [
    {
      type: 'value',
      name: '产量',
      position: 'left'
    },
    {
      type: 'value',
      name: '良品率',
      position: 'right',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '计划产量',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '实际产量',
      type: 'line',
      data: [110, 125, 95, 130, 85, 220, 200]
    },
    {
      name: '良品率',
      type: 'line',
      yAxisIndex: 1,
      data: [95, 93, 96, 94, 95, 92, 94]
    }
  ]
})

// 表格列定义
const columns = [
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '效率',
    dataIndex: 'efficiency',
    key: 'efficiency'
  }
]

// 设备状态列表
const equipmentList = ref([
  {
    key: '1',
    name: 'CNC-001',
    status: '运行中',
    efficiency: 95
  },
  {
    key: '2',
    name: 'CNC-002',
    status: '运行中',
    efficiency: 88
  },
  {
    key: '3',
    name: 'CNC-003',
    status: '待机',
    efficiency: 0
  }
])
</script>

<style lang="less" scoped>
.stat-cards {
  margin-bottom: 16px;
}

.stat-card {
  margin-bottom: 16px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  font-size: 24px;
  margin-right: 12px;
  padding: 8px;
  border-radius: 8px;
  
  &.primary {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
  }
  
  &.success {
    color: #52c41a;
    background-color: rgba(82, 196, 26, 0.1);
  }
  
  &.warning {
    color: #faad14;
    background-color: rgba(250, 173, 20, 0.1);
  }
  
  &.info {
    color: #1890ff;
    background-color: rgba(24, 144, 255, 0.1);
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.stat-title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.chart-card,
.equipment-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

.chart {
  height: 100%;
}
</style> 